<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../plugins/coreui/coreui.css" rel="stylesheet" />
    <!--[if lt IE 9]>
        <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <![endif]-->
    <style>
        body{
            background:#42485B;
        }
        .login-box{
            margin-top:180px;
            padding:50px;
            background:white;
            text-align:center;
        }
        .login-box>div{
            margin-bottom:10px;
        }
        .login-input{
            border:none;
            border-bottom:1px solid #4CAF50;
            background:none;
            width:250px;
            height:40px;
            font-size:18px;
        }
        .login-input:focus{
            outline:none;
        }
        .fa{
            color:#4CAF50;
            font-size:20px;
        }
        /*@media only screen and (max-width: 767px){
            .fa{
                margin-right:-1px;
            }
        } 
        @media only screen and (min-width: 768px) and (max-width: 991px){
            .fa{
                margin-right:-10px;
            }
        }
        @media only screen and (min-width: 992px) and (max-width: 1199px){
            .fa{
                margin-right:-20px;
            }
        }*/
        .login-btn{
            width:270px;
        }
        .title{
            font-size:30px;
            padding-bottom:10px;
        }
        .info{
            text-align:left;
            color:red;
            font-size:18px;
            margin-left:80px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-box col-4 col-offset-4 col-m-12">
            <div class="title">登录</div>
            <div class="info"></div>
            <div>
                <i class="fa fa-user" aria-hidden="true"></i>
                <input type="text" id="account" class="form-input login-input" placeholder="账号" />
            </div>
            <div>
                <i class="fa fa-lock" aria-hidden="true"></i>
                <input type="password" id="password" class="form-input login-input" placeholder="密码" />
            </div>
            <div>
                <button class="btn btn-bg-green login-btn">登录</button>
            </div>
        </div>
    </div>
    
    <!-- script -->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script src="../../plugins/jquery/jquery.md5.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
	<script>
		$(function(){
			
			$(".login-btn").click(function(){
				if($("#account").val()==""){
					layer.tips('账号不能为空', '#account');
					$("#account").focus();
					return false;
				}
				if($("#password").val()==""){
					layer.tips('密码不能为空', '#password');
					$("#password").focus();
					return false;
				}
				var pwd=$.md5($("#password").val()).toUpperCase();
				var data={"account":$("#account").val(),"password":pwd};
				var _this=$(this);
				_this.html("登录中...").attr("disabled","disabled");
				$.post("login",data,function(result){
					if(result.flag){
						location.href='../index/index';
					}else{
						$(".info").html(result.msg==null?"提示：登录失败":"提示："+result.msg);
						_this.html("登录").removeAttr("disabled","disabled");
					}
				}); 
			});
		});
	</script>
</body>
</html>
